<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    /* ul 剧中 一行放 7个 li */

    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      width: 560px;
      border: 1px solid #000;
      overflow: hidden;
    }

    li {
      float: left;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: skyblue;
      border: 5px solid white;

      /* 盒子模型
          border-box 元素会优先保证 自己的大小 添加border padding 都会 往内部压缩
          content-box 这个是默认值 不设置就是这个 优先保证 内容的大小不变 往四周发散
       */
      box-sizing: border-box;
    }

    li:first-child {
      background-color: orange;
    }

    li:last-child {
      background-color: lightseagreen;
    }

    li:hover {
      background-color: hotpink !important;
      font-size: 50px;
      font-weight: 900;
      /* 添加过渡 让样式的改变 有动画效果 */
      transition: all .2s;
    }

    /* 7的倍数 */
    li:nth-child(7n){
      background-color: gainsboro;
    }

    /* 周6 yellowgreen
      6 = 7-1
      13 = 14-1
      20 = 21-1
     */
     li:nth-child(7n-1){
       background-color:yellowgreen;
     }
     li:nth-child(2n){
       color:orange;
     }
  </style>
</head>

<body>
  <!--ul>li{$}*31-->
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ul>

</body>

</html>